<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch实现姓名案例</title>
</head>
<body>
    <!-- 
        computed与watch之间的区别
            1.computed能完成的 watch都可以完成
            2.watch能万完成的 computed不一定可以完成 例如watch可以进行异步操作
        两个重要的原则：
            1.被Vue管理的函数 最好写成普通函数 这样this的指向才是vm 或者 组件实例对象
            2.所有不被Vue所管理的函数（定时器的回调函数，Ajax的回调函数等），最好写成箭头函数
                这样this的指向才是vm 或 组件实例对象
     -->
    <div id="app">
        姓：<input type="text" v-model="name.firstName">
        <br>
        名：<input type="text" v-model="name.lastName">
        <br>
        全名：{{fullName}}
    </div>
    <script src="../vuejs/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '#app',
            data() {
                return {
                    name : {
                        firstName : '张',
                        lastName : '三',
                    },
                    fullName: ''
                }
            },
            watch: {
                name:{
                    deep: true,
                    immediate: true,
                    handler(newVal,oldVal){
                        // 计算属性用不了类似异步任务的内容 需要靠返回值
                        // watch不需要返回值 可以使用异步任务
                        setTimeout(()=>{
                            // 这里的箭头函数 内容不靠vue管理，当我们使用箭头函数这里的this就不是window了
                            // 它会向上找 而name内的this即为vm实例
                            // 如果将箭头函数改成function函数就会出现this变成window
                            this.fullName = this.name.firstName + '-' + this.name.lastName
                        },1000)
                        
                    }
                }
            }
        })
    </script>
</body>
</html>